<template>
    <div class="network">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-tickets"></i> 无线网络配置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form ref="form" :model="form" label-width="80px">
                <el-col :md="24" :lg="24">
                    <div class="sub-title">网络名称</div>
                    <el-input v-model="form.name" :disabled="true"></el-input>
                </el-col>
                <el-switch
                  v-model="form.mode"
                  active-color="#13ce66"
                  inactive-color="#F0F0F0" active-text="动态获取IP" inactive-text="分配静态IP"  @change="change">
                </el-switch>
                <el-col :md="24" :lg="24" v-show="!form.mode">
                    <div class="sub-title">IPv4地址</div>
                    <el-input v-model="form.ip_address" :disabled="false"></el-input>
                </el-col>
<!--                 <el-col :md="24" :lg="24" v-show="staticIp">
                    <div class="sub-title">IPv4子网掩码</div>
                    <el-input v-model="form.name" :disabled="false"></el-input>
                </el-col> -->
                <el-col :md="24" :lg="24" v-show="!form.mode">
                    <div class="sub-title">IPv4默认网关</div>
                    <el-input v-model="form.routers" :disabled="false"></el-input>
                </el-col>
                <el-col :md="24" :lg="24">
                    <div class="sub-title">首选DNS</div>
                    <el-input v-model="form.dns1" :disabled="false"></el-input>
                </el-col>
                <el-col :md="24" :lg="24">
                    <div class="sub-title">备选DNS</div>
                    <el-input v-model="form.dns2" :disabled="false"></el-input>
                </el-col :md="24" :lg="24">
            </el-form>
        </div>
        <el-button type="primary" @click="onSubmit">提交</el-button>

    </div>
</template>

<script>
    export default {
        name: 'baseform',
        data: function(){
            return {
                data:{},
                form: {
                    "name":"wlan0",
                    "mode": false,
                    "ip_address":"",
                    "routers":"",
                    "dns1":"",
                    "dns2":""
                }
            }
        },
        mounted() {
            var that = this;
            this.getData();
        },
        methods: {
            onSubmit() {
                let self = this;   
                var params = self.form;
                param.dns = self.form.dns1 + " " + self.form.dns2;
                delete params.dns1;
                delete params.dns2;
                param.mode = param.mode==true?"dhcp":"manual" 
                let url = new URL("http://" + location.hostname + ":3000/netcfg");
                fetch(url,
                    {
                        method:"POST",
                         headers: {
                            "Content-Type": "application/json"
                        },
                        body: JSON.stringify(params)
                    }).then(function(res){
                        return res.json()
                    }).then(function(res){
                        this.$message.success('提交成功！');
                    })
            },
            getData(){
                let self = this;   
                let url = new URL("http://" + location.hostname + ":3000/netcfg");
                fetch(url,
                    {
                        method:"GET",
                         headers: {
                            "Content-Type": "application/json"
                        }
                    }).then(function(res){
                        return res.json()
                    }).then(function(res){
                        for(var i = 0;i<res.iface.length;i++ ){
                            if(res.iface[i]["name"] == "wlan0"){
                                res = res.iface[i];
                                break;
                            }
                        }
                        self.form = res;
                        self.form.mode = res.mode == "manual"?false:true
                        self.form.dns1 = res.dns.split(" ")[0];
                        self.form.dns2 = res.dns.split(" ")[1];
                    })
            },
            change(e){
                this.form.mode = e
            }
        }
    }
</script>
<style>
    .network .sub-title{
        font-size: 14px;
        font-family: 微软雅黑;
        font-weight: bold;
        color: #767576;
    }
    .network .container .el-col{
        padding: 10px 0px;
    }
    .network .container .el-form{
        overflow: hidden;
    }
    .network .container .el-input{
        width: 500px
    }
    .network .el-button{
        margin: 10px;
    }
</style>